<template>
    <div style="display: inline-block" class="message-content">
        <Dropdown trigger="click" placement="bottom-end">
            <div style="display: inline-block">
                <div class="header-right-icon header-action">
                    <Badge :count="messageCount">
                        <Icon type="md-notifications" :size="20" style="margin-top: 3px"/>
                    </Badge>
                </div>
            </div>
            <div slot="list" class="message-tip">
                <div class="title-content">
                    <div class="title">{{ $t("Notifications") }}</div>
                    <a class="mark" v-if="messageList.length > 0" @click="markAll">{{$t("markAll") }}</a>
                    <a class="mark" v-else @click="getData">{{$t("refresh") }}</a>
                </div>
                <div class="mes-list">
                    <div v-if="messageList.length == 0" class="empty-message">
                        <Icon type="ios-mail-open-outline" size="70" color="#e4e4e4"/>
                        <p>{{ $t("noNewMes") }}</p>
                    </div>
                    <div v-else>
                        <div
                                v-for="(item, index) in messageList"
                                :key="index"
                                :class="{
                'mes-item': item.status == 0,
                'mes-item opacity': item.status == 1,}"
                                @click="messageDetail(item)">
                            <div class="icon">
                                <Avatar
                                        v-if="item.type == '通知'"
                                        style="background-color: #ff9900"
                                        icon="md-send"
                                        class="icon"/>
                                <Avatar
                                        v-else-if="item.type == '提醒'"
                                        style="background-color: #ed4014"
                                        icon="md-alarm"
                                        class="icon"/>
                                <Avatar
                                        v-else-if="item.type == '私信'"
                                        style="background-color: #87d068"
                                        icon="md-person"
                                        class="icon"/>
                                <Avatar
                                        v-else-if="item.type == '工作流'"
                                        style="background-color: #2db7f5"
                                        icon="md-briefcase"
                                        class="icon"/>
                                <Avatar
                                        v-else-if="item.type == '系统公告'"
                                        style="background-color: #2d8cf0"
                                        icon="md-mail"
                                        class="icon"/>
                                <Avatar v-else icon="ios-mail" class="icon"/>
                            </div>
                            <div class="detail">
                                <div class="mes-title">{{ item.title }}</div>
                                <div class="mes-time">
                                    <Icon type="md-time" style="margin-right: 3px"/>
                                    <Time
                                            :time="item.createTime"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <Spin fix v-if="loading"/>
                </div>
                <a class="show-more" @click="showMessage">
                    <Icon
                            type="ios-arrow-dropright-circle"
                            size="16"
                            style="margin: 0 5px 2px 0"/>
                    {{ $t("showMore") }}
                </a>
            </div>
        </Dropdown>
    </div>
</template>

<script>
    import {allMessageSend, getMessageSendData, ws} from "@/api/index";
    import SockJS from "sockjs-client";
    import Stomp from "stompjs";
    import util from "@/libs/util.js";
    import Cookies from "js-cookie";

    export default {
        name: "messageTip",
        props: {},
        data() {
            return {
                loading: false,
                userId: "",
                messageList: [],
                client: null,
            };
        },
        computed: {
            messageCount() {
                return this.$store.state.app.messageCount;
            },
        },
        stompClient: {
            monitorIntervalTime: 100,
            stompReconnect: true,
            timeout(orgCmd) {
            },
        },
        methods: {
            init() {
                let userInfo = JSON.parse(Cookies.get("userInfo"));
                this.userId = userInfo.id;
                this.getData();
                // 消息开关 websocket
                let messageOpen = this.getStore("messageOpen");
                if (messageOpen != "0") {
                    this.connect();
                }
            },
            getData() {
                // 读取未读消息
                this.loading = true;
                getMessageSendData({
                    userId: this.userId,
                    status: 0,
                    page: {
                        current: 1,
                        size: 5,
                        total: 0
                    },
                    sort: "createTime",
                    order: "desc",
                }).then((res) => {
                    if (res.status == 200) {
                        this.loading = false;
                        this.messageList = res.result.records;
                        this.$store.commit("setMessageCount", res.result.total);
                    }
                });
            },
            showMessage() {
                util.openNewPage(this, "message_index");
                if (this.$route.name == "message_index") {
                    return;
                }
                this.$router.push({
                    name: "message_index",
                });
            },
            connect() {
                let headers = {};
                this.client = Stomp.over(new SockJS(ws));
                this.client.connect(headers, this.onConnected, this.onFailed);
            },
            onConnected(frame) {
                console.log("连接ws成功: " + frame);
                let topicSubscription = this.client.subscribe(
                    "/topic/subscribe",
                    this.responseCallback
                );
                let queueSubscription = this.client.subscribe(
                    "/user/" + this.userId + "/queue/subscribe",
                    this.responseCallback
                );
            },
            onFailed(frame) {
                console.log("连接ws失败： " + JSON.stringify(frame));
            },
            responseCallback(frame) {
                console.log("收到消息：" + frame.body);
                this.getData();
            },
            messageDetail(v) {
                if (v.status == 1) {
                    return;
                }
                util.openNewPage(this, "message_index");
                this.$router.push({
                    name: "message_index",
                    query: {count: this.messageCount, content: v},
                });
                v.status = 1;
            },
            markAll() {
                allMessageSend(0).then((res) => {
                    if (res.status == 200) {
                        this.getData();
                    }
                });
            },
        },
        mounted() {
            this.init();
        },
    };
</script>

<style lang="less">
    .message-content .ivu-select-dropdown {
        padding: 0;
    }

    .message-tip {
        display: flex;
        flex-direction: column;
        width: 320px;

        .title-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;

            .title {
                color: #515a6e;
                font-size: 16px;
                font-weight: 500;
            }

            .mark {
                font-size: 12px;
            }
        }

        .empty-message {
            height: 220px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #a7a7a7;

            p {
                margin-top: 10px;
            }
        }

        .mes-list {
            position: relative;
            display: flex;
            flex-direction: column;
            max-height: 261px;
            overflow: auto;

            .mes-item {
                display: flex;
                height: 87px;
                padding: 12px 16px 12px 16px;
                cursor: pointer;
                transition: all 0.2s ease-in-out;

                &:hover {
                    background-color: #f6f6f6;
                }

                .icon {
                    margin: 1px 16px 0 0;
                    width: 32px;
                }

                .detail {
                    .mes-title {
                        color: #515a6e;
                        min-height: 42px;
                        margin-bottom: 5px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }

                    .mes-time {
                        font-size: 12px;
                        color: #869ac0;
                    }
                }
            }

            .opacity {
                opacity: 0.4;
            }
        }

        .mes-list::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .mes-list::-webkit-scrollbar-thumb {
            border-radius: 4px;
            -webkit-box-shadow: inset 0 0 2px #d1d1d1;
            background: #e4e4e4;
        }

        .show-more {
            border-top: 1px solid #eff2f7;
            padding: 16px;
            display: flex;
            align-content: center;
            justify-content: center;
            align-items: center;
        }
    }
</style>